<script setup lang="ts">
defineOptions({
  name: "loadRateDetail"
});
import { ref } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import { useLabelLayoutFn_rate } from "../hook";

interface Props {
  title: string;
  mainKey: string;
}

const props = withDefaults(defineProps<Props>(), { title: "" });
const dialogTableVisible = defineModel({ type: Boolean, default: false });
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const hasJobId = ref(true);
const bian = ref("双边");
const setBian = val => {
  echartsComRef.value.updateOption();
};

const labelLayoutFn = async () => {
  return await useLabelLayoutFn_rate(props.mainKey, bian.value);
};
const getEchartsInstance = ins => {
  hasJobId.value = typeof echartsComRef.value?.fnOptions?.series[0]?.markLine == "undefined" ? false : true;
  console.log("see", hasJobId.value);
};
</script>

<template>
  <px-dialog v-model="dialogTableVisible" :title="title" :width="1000" append-to-body>
    <div class="rate-dailog-detail">
      <!-- <px-radio-group v-if="hasJobId" v-model="bian" class="bian" size="small" @change="setBian">
        <px-radio-button label="双边" />
        <px-radio-button label="上单边" />
        <px-radio-button label="下单边" />
      </px-radio-group> -->
      <div class="chart-c">
        <echartsCom ref="echartsComRef" :labelLayoutFn="labelLayoutFn" :getEchartsInstance="getEchartsInstance" />
      </div>
    </div>
  </px-dialog>
</template>

<style lang="scss" scoped>
.rate-dailog-detail {
  width: 100%;
  height: 440px;
  text-align: center;

  .bian {
    margin-bottom: 10px;
  }

  .chart-c {
    height: 410px;
  }
}
</style>
